<template>
    <div class="index-page" v-if="login_user">
        <div class="index-top-warp">
            <indexTop :login_user="login_user" />
        </div>
        <div class="index-left-warp">
            <indexLeft @clickMenu="addTab" :showMenu="tabActive" />
        </div>
        <div class="index-content-warp">
            <el-tabs v-model="tabActive" type="card" class="index-content-tab" closable @tab-remove="removeTab">
                <el-tab-pane
                    v-for="(item,index) in tabContant"
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
                >
                    <middleKey :componentName="item.componentsName" :queryMsg="item.queryMsg" @addTab="addTab"></middleKey>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
    import indexTop from '../components/indexTop.vue'     //头部
    import indexLeft from '../components/indexLeft.vue'   //左侧
    import middleKey from '../components/middleKey.vue'   //中间件
    export default({
      components: {
          indexTop,
          indexLeft,
          middleKey
      },
      data() {
          return {
              tabActive: '',
              tabContant: [],
          }
      },
      computed:{
        appId(){
            return this.$store.state.id
        }
      },
      watch:{
        appId(newData,old){
            let that = this;
            if(old != newData){
                that.tabActive =  '';
                that.tabContant = [];
            }
        }
      },
      methods: {
            addTab(targetName) {
                let that = this;
                console.log(targetName,11111)
                let obj = {
                    name: targetName.tabOptions,
                    title: targetName.tabOptions.split('_')[1],
                    componentsName: targetName.tabOptions.split('_')[0],
                    queryMsg: targetName.queryMsg ? targetName.queryMsg : null
                }
                //判断标签是否已经添加过
                let status = false;
                that.tabContant.forEach((tab, index) => {
                  if (tab.name == obj.name) {
                    status = true;
                    return;
                  }
                })
                //如果没有则添加
                if (!status) {
                    that.tabContant.push(obj);
                }
                that.tabActive = obj.name;
            },
            removeTab(targetName){
                let that = this;
                let tabs = that.tabContant;
                let activeName = that.tabActive;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }
                that.tabActive = activeName;
                that.tabContant = tabs.filter(tab => tab.name !== targetName);
                if(that.tabContant.length==0){
                    that.tabActive = '';
                }
            }
        },
      created(){
        let that = this;
        that.login_user = that.localData('get', 'login_user');
        if (!that.login_user) {
          that.logout()
        }
        let id = that.login_user.supportAppArray[0].appId;
        that.$store.dispatch('appIdChange',id)
      }
    })
</script>
<style lang="less">
    @import "../assets/less/public.less";
    @top: 80px;
    @left: 200px;
    .index-page{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        .index-top-warp{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: @top;
        }
        .index-left-warp{
            position: absolute;
            top: @top;
            width: @left;
            left: 0;
            bottom: 0;
            overflow-y: auto;
        }
        .index-content-warp{
            position: absolute;
            top: @top;
            left: @left;
            bottom: 0;
            right: 0;
            padding:10px;
            background: #F6F6F6;
            .index-content-tab{
              height:100%;
              position:relative;
              .el-tabs__header{
                position: absolute;
                width:100%;
                background: #fff;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
              }
              .el-tabs__content{
                position: absolute;
                top: 45px;
                bottom: 0;
                overflow: auto;
                width:100%;
              }
            }

        }
    }
</style>
